import { Card, List, message } from 'antd';
import axios from 'axios';
import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class Home extends Component {
    state = {
        products: []
    }
    componentDidMount() {
        axios.get('/shopping-product-server/product/all')
            .then(response => {
                // 处理返回的数据
                const resp = response.data
                if (resp.success) {
                    this.setState({
                        products: resp.data
                    })
                    return
                } else {
                    message.info(resp.data)
                }
            }).catch(error => {
                // 处理错误
                message.error(error)
            });
    }
    render() {
        return (
            <div>
                <List
                    dataSource={this.state.products}
                    size='small'
                    renderItem={(item) => (
                        <Link to={`/ProductDetail/${item.id}`}>
                            <List.Item style={{ 'backgroundColor': 'skyblue' }}>
                                <Card
                                    style={{ width: 200, height: 200 }}
                                    size='small'
                                    cover={<img alt="加载失败" style={{ width: 200, height: 200 }} src={item.image} />}
                                    title={item.title}>
                                    {/* <Card.Meta description={item.description} /> */}
                                </Card>
                            </List.Item>
                        </Link>
                    )}
                    grid={{
                        gutter: 6,
                        column: 3,
                    }}>

                </List>
            </div>
        );
    }
}

export default Home;